<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('投诉全量分析')" />
</head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="analysis-top-form">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <label>选择时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"  value="2019-10-01" name="startTime"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" value="2019-10-24" name="endTime"/>
                        </li>
                        <li>
                            <label>经营单元：</label>
                            <select name="dw" id="dw">
                                <option value="全部">全部</option>
                                <option th:each="problemsDw : ${problemsDwList}" th:text="${problemsDw.dw}" th:value="${problemsDw.dw}"></option>
                           </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped" style="width:40%; " >
            <table id="bootstrap-table" ></table>
        </div>
        <div style="margin-top: 10px;width: 60%;padding-right: 0px; float: left; min-height:75%;">
            <div class="col-sm-6"  style="width:100%; padding-right: 0px; height: 100%; ">
                <div class="ibox float-e-margins"  style="border-radius: 6px;" >
                    <div class="ibox-title">
                        <h5>TOP5问题分析</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-ladar-chart"  style="width: 100%; height: 400px"></div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var detailFlag = [[${@permission.hasPermi('monitor:operlog:detail')}]];
    var datas = [[${@dict.getType('sys_common_status')}]];
    var prefix = ctx + "dataanalysis/top5";

    query();
    function query() {
        var options = {
            url: prefix+"/list",
            detailUrl: prefix + "/detail/{id}",
            sortName: "fl_count",
            sortOrder: "desc",
            modalName: "TOP5分析",
            escape: true,
            showPageGo: true,
            rememberSelected: true,
            columns: [
                {
                    field: 'xh',
                    title: '序号'
                },
                {
                    field: 'lht',
                    title: '经营单元',
                    sortable: true
                },
                {
                    field: 'fl',
                    title: '业务类型'
                },
                {
                    field: 'fl_count',
                    title: '数量'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="Fl_Details(\'' + row.lht +','+ row.fl+ '\')"><i class="fa fa-search"></i>明细</a>');
                        return actions.join('');
                    }
                }]
        };

        $.table.init(options);
        $.table.search();
        initEcharts();
    };

    function Fl_Details(lht) {

        var url = ctx + "dataanalysis/top5/details?param="+lht;
        // alert(url);
        $.modal.openTab("TOP5问题明细", url);

    }
   function  initEcharts() {
       var myChart = echarts.init(document.getElementById("echarts-ladar-chart"));
       myChart.showLoading();
       var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
       var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
       var lht=[];
       var nums=[];
       $.ajax({
           type : "post",
           async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
           url : prefix+"/json",    //请求发送到dataActiont处
           data : {startTime:$("#startTime").val(),endTime:$("#endTime").val(),dw: $("#dw").val()},
           dataType : "json",        //返回数据形式为json
           success : function(result) {
               //请求成功时执行该函数内容，result即为服务器返回的json对象
               if (result) {
                   for(var i=0;i<result.length;i++){
                       names.push(result[i].fl);
                       values.push(result[i].fl_count);
                       lht.push(result[i].lht);
                       var obj = new Object();
                       obj.name = result[i].fl;
                       obj.value = result[i].fl_count;
                       nums.push(obj);
                   }
                   myChart.hideLoading();    //隐藏加载动画
                   myChart.setOption({        //加载数据图表
                       title:{
                           text:lht[0],
                           x:'center'
                       },
                       tooltip: { trigger: 'item',
                           formatter: "{a} <br/>{b} : {c} ({d}%)"
                       },
                       legend: {
                           orient: 'vertical',
                           left: 'left',
                           data:names
                       },
                       series: [
                           {
                               name: 'TOP5问题',
                               type: 'pie',
                               radius : '55%',
                               center: ['50%', '60%'],
                               data:nums,
                               itemStyle: {
                                   emphasis: {
                                       shadowBlur: 10,
                                       shadowOffsetX: 0,
                                       shadowColor: 'rgba(0, 0, 0, 0.5)'
                                   }
                               }
                           }
                       ]
                   });
               }
           },
           error : function(errorMsg) {
               //请求失败时执行该函数
               alert("图表请求数据失败!");
               myChart.hideLoading();
           }
       });//end ajax
   }

    function unlock() {
        $.operate.post(prefix + "/unlock?loginName=" + $.table.selectColumns("loginName"));
    }
</script>
</body>
</html>